<!DOCTYPE html>
<html>
{include file="public/head"}

<body>
    {include file="public/nav"} {include file="public/nav-2"}
    <!-- 分割 -->
    <div class="layui-container fly-marginTop">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="fly-panel fly-panel-user " pad20="">
                    <div class="layui-tab layui-tab-brief" lay-filter="user">
                        <ul class="layui-tab-title">
                            <li class="layui-this">信息修改</li>
                            <li><a href="{:url('account/alterpasswd')}">密码修改</a></li>
                        </ul>
                        <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-form layui-form-pane">
                                    <form enctype="multipart/form-data" method="post" action="{:url('account/submitalter')}" id="myform">
                                        <div class="layui-row layui-col-space15">
                                            <div class="layui-col-md6">
                                                <div class="layui-form-item">
                                                    <label for="L_user_id" class="layui-form-label">用户名</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" value="{$user_id}" name="user_id" autocomplete="off" class="layui-input layui-disabled"  readonly>
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label for="L_email" class="layui-form-label">邮箱</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" id="email" value="{$email}" name="email" autocomplete="off" class="layui-input layui-disabled"  readonly>
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label for="L_nick" class="layui-form-label">昵称</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" id="nick" value="{$nick}" name="nick" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label for="L_school" class="layui-form-label">学校</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" id="school" value="{$school}" name="school" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label for="L_qq" class="layui-form-label">QQ</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" id="qq" value="{$qq}" name="qq" lay-verify="number" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label for="L_blog" class="layui-form-label">博客</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" id="blog" value="{$blog}" name="blog" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-upload">
                                                    <div class="photos detail-body-myalter">
                                                        <img id="img" src="__STATIC__/../upload/users/head/{$src}" style="border: 0px;border: 1px solid #ffffff; -webkit-border-radius: 50%;border-radius: 50%">
                                                    </div>
                                                    <div class="layui-upload-list layui-anim layui-anim-up">
                                                        <button type="button" class="layui-btn" id="image"><i class="layui-icon">&#xe67c;</i>上传头像</button>
                                                        <!-- <p id="demoText"></p> -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <!-- <input type="file" name="image" />
                                                <br> -->
                                                <!-- <button type="button" class="layui-btn" id="image">
                                                    <i class="layui-icon">&#xe67c;</i>上传头像
                                                </button>-->
                                                <div class="layui-form-item layui-form-text" style="width:300px;">
                                                    <label class="layui-form-label">个人简介</label>
                                                    <div class="layui-input-block">
                                                        <textarea name="brief" placeholder="请输入内容..." class="layui-textarea" style="min-height: 200px;">{$brief}</textarea>
                                                    </div>
                                                </div>
                                                {if condition="isset($qq_login)"}
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">QQ绑定:</label>
                                                    <div class="layui-input-block">
                                                        <a href="#" style='color: #2894FF;' title="绑定QQ" id='qq_login' class="iconfont icon-qq"></a>
                                                    </div>
                                                </div>
                                                {/if}
                                                <div class="layui-form-item layui-inline">
                                                    <input type="submit" value="提交" class="layui-btn" lay-filter="submit" lay-submit>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {include file="public/side-bar"}
        </div>
    </div>
    <!-- 分割 -->
    {include file="public/foot"}
</body>
<script>
function getBytesLength(str) {
    // 在GBK编码里，除了ASCII字符，其它都占两个字符宽
    return str.replace(/[^\x00-\xff]/g, 'xx').length;
}
layui.use(['jquery', 'layer', 'form'], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    // layer.msg('hello');
    form.on('submit(submit)', function(data) {
        // console.log("length=" + getBytesLength(data.field['school']));
        // layer.msg("hello");
        if (getBytesLength(data.field['nick']) > 100) {
            layer.msg("昵称长度应小于100");
            return false;
        }
        if (getBytesLength(data.field['school']) > 100) {
            layer.msg("学校长度应小于100");
            return false;
        }
        if (getBytesLength(data.field['qq']) > 20) {
            layer.msg("QQ长度应小于20");
            return false;
        }
        if (getBytesLength(data.field['blog']) > 50) {
            layer.msg("博客长度应小于50");
            return false;
        }
        if (getBytesLength(data.field['brief']) > 300) {
            layer.msg("个人简介长度应小于300");
            return false;
        }
        // console.log(getBytesLength(data.field['nick']));
        // if(getBytesLength(data.field['nick'])>100)
        // {
        //     // alert('太长了~~~');
        //     return false;
        // }

    });
});

layui.use('upload', function() {
    var upload = layui.upload,
        $ = layui.jquery;
    $('#qq_login').click(function() {
        var url = '{:url("web/QQconnect/qq_login")}';
        location.href = url;
    });
    upload.render({
        url: '{:url("account/upload_picture")}',
        elem: '#image',
        ext: 'jpg|png|gif|bmp|jpeg',
        size: 2048,
        before: function(input) {
            loading = layer.load(2, {
                shade: [0.2, '#000']
            });
        },
        done: function(res) {
            layer.close(loading);
            // jq('input[name=img]').val(res.path);
            // img.src = "" + res.path;
            // console.log(res.src);
            
            if (res.state == 1) {
                $("#img").attr('src', '__STATIC__/../upload/users/head/' + res.src);
                layer.msg('上传头像成功!');
            }
            else
                layer.msg('上传头像失败!');
        },
        error: function() {
            layui.msg('进入后台失败！请联系OJ管理员~');
        }
    });
});
</script>

</html>